<template>
    <div>
        <div class="container">
            <el-row :gutter="10">
                <el-col :span="5">
                    <el-select v-model="query.stage" filterable clearable placeholder="请选择阶段">
                        <el-option v-for="item in stageList" :label="item.label" :value="item.value"> {{ item.label }}</el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-select v-model="query.status" filterable clearable placeholder="请选择状态">
                        <el-option :label="'正常'" :value="0"> 正常</el-option>
                        <el-option :label="'禁用'" :value="1"> 禁用</el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="query.key" placeholder="电话/姓名" class="handle-input" clearable></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-col>
            </el-row>

            <el-table :data="tableData" border stripe class="table" ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="sexName" label="性别" align="center"></el-table-column>
                <el-table-column prop="birthdayName" label="出生日期" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                <el-table-column prop="statusName" label="状态" align="center"></el-table-column>
                <el-table-column prop="stageName" label="阶段" align="center"></el-table-column>
                <el-table-column prop="address" label="所属地区" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pno"
                    :page-size="query.size" :total="query.total" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" v-model="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="名称">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone" clearable></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="form.sex" filterable clearable>
                        <el-option :label="'男'" value="0"> 男</el-option>
                        <el-option :label="'女'" value="1"> 女</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="form.status" filterable clearable>
                        <el-option :label="'正常'" value="0"> 正常</el-option>
                        <el-option :label="'禁用'" value="1"> 禁用</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="阶段">
                    <el-select v-model="form.stage" filterable clearable>
                        <el-option v-for="item in stageList" :label="item.label" :value="item.value"> {{ item.label }}</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
    name: "bookList",
    data() {
        return {
            query: {
                pno: 1,  //当前页码
                total: 0,   //总共条数
                size: 4,   //每页多少条
                key: '', //搜索关键字
                stage: '',
                status: ''
            },
            stageList: [
                {
                    value: "1",
                    label: '未报名'
                },
                {
                    value: "2",
                    label: '已报名'
                },
                {
                    value: '3',
                    label: '科目一'
                },
                {
                    value: '4',
                    label: '科目二'
                },
                {
                    value: '5',
                    label: '科目三'
                },
                {
                    value: '6',
                    label: '科目四'
                },
                {
                    value: '7',
                    label: '已拿证'
                },

            ],
            tableData: [],
            pageshow: true,
            editVisible: false,
            form: {},
            idx: -1,
            id: -1
        }
    },
    created() {
        this.getData();
    },

    methods: {
        getData() {
            let that = this;
            this.$http.post("user/list", this.query)
                .then(res => {
                    console.log(res)
                    that.tableData = res.data.records
                    that.query.pno = Number(res.data.current)  //当前是第几页
                    that.query.total = Number(res.data.total) //总共条数
                    that.query.size = Number(res.data.size)//每页多少条
                })
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index, row)
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            let that = this;
            that.editVisible = false;
            this.$http.post("user/update", this.form).then(
                res => {
                    that.$message.success(res.msg);
                    this.getData()
                }
            )
        },
        // 分页导航
        handlePageChange(val) {
            this.query.pno = val
            this.getData()
        },
        //搜索
        handleSearch() {
            this.getData()
        }
    }
}
</script>

<style scoped>
.el-select {
    width: 100%;
}

.el-input {
    width: 100%;
}

.table {
    margin-top: 20px;
}
</style>
